<script setup lang="ts">
import type { PlusColumn } from 'plus-pro-components'

import { usePropertyShow } from '@fl/api/fit-old-api'
import { SearchDescriptions } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const route = useRoute()
const { go } = useRouter()

const id = ref(route.params?.id as string) // 物业公司id

const initialState = {
    list: '',
    porperty: '',
}
const state = ref(cloneDeep(initialState))

const { data: propertyInfo, isLoading } = usePropertyShow(id)
watchEffect(() => {
    if (propertyInfo.value) {
        state.value = {
            list: propertyInfo.value.constructions,
            porperty: propertyInfo.value.propertyEnterpriseName,
        }
    }
})

function goBack() {
    go(-1)
}

const columns: PlusColumn[] = [
    {
        descriptionsItemProps: {
            span: 3,
        },
        label: '物业公司:',
        prop: 'porperty',
    },
    {
        descriptionsItemProps: {
            span: 3,
        },
        label: '施工单位:',
        prop: 'list',
    },
]
</script>

<template>
    <ElCard shadow="never">
        <ElSkeleton v-if="isLoading"
                    :rows="5"
        />

        <template v-else>
            <el-button @click="goBack">
                返回列表
            </el-button>

            <SearchDescriptions :columns="columns"
                                :data="state"
            >
                <template #plus-desc-list="{ value }">
                    <div v-for="item in value"
                         :key="item.id"
                    >
                        {{ item.enterpriseName }}
                    </div>
                </template>
            </SearchDescriptions>
        </template>
    </ElCard>
</template>
